<template>
	<view class="">
		<view class="bankIuput flex_ld" @click="openBank" v-if="placeholder=='银行名称'" :style="{width:width + 'rpx'}">
			<u--input :placeholder="'请选择' + placeholder" fontSize="14" color="#666666" border="none "
				v-model.trim="bank_name" readonly clearable></u--input>
			<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon>
		</view>
		<view class="bankIuput flex_ld" @click="openBank" v-else :style="{width:width+ 'rpx'}">
			<u--input :placeholder="'请选择' + placeholder" fontSize="14" color="#666666" border="none "
				v-model.trim="branch_name" readonly clearable></u--input>
			<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon>
		</view>
		<u-popup :show="show" mode="bottom" @close="closePopup" :safeAreaInsetBottom="false" closeable
			bgColor="transparent">
			<view class="area_popup flex_ZC">
				<view class="titles flex_ZC">
					<text>{{bankName}}</text>
					<view class="titles_input">
						<u-search bgColor="#f7f7f7" searchIconSize="28" v-model.trim="names" :actionStyle="actionStyle"
							margin="0 16px 0 0" @clear="bankSearch" @search="bankSearch" animation
							@custom="bankSearch"></u-search>
					</view>
				</view>
				<view class="masks"></view>
				<view class="popup_list mt24 flex_Z" v-if="bankLists.length != 0">
					<view class="area_box" :class="item.code == bankCode?'active2':''" v-for="(item,index) in bankLists"
						:key="index" @click="changeAreaTwo(item)">
						<text v-if="placeholder=='银行名称'">{{item.name}}</text>
						<text v-else>{{item.branch_name}}</text>
					</view>
				</view>
				<view class="mt40 flex_ZC" v-if="bankLists.length == 0&&placeholder=='支行名称'">
					<image class="noImg" :src="baseUrl + '/static/image/noData1.png'" mode="aspectFill"></image>
					<text class="no_tit">请输入支行名称查找</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		baseURL
	} from "@/utils/request.js"
	import {
		bankList,
		pageBankList
	} from "@/api/join.js"
	export default {
		props: {
			bankName: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '银行名称'
			},
			actionStyle: {
				type: Object,
				default: () => {
					fontSize: '28rpx';
					color: '#FFC300'
				}
			},
			bankPcode: {
				type: String | Number,
				default: ''
			},
			bankCode: {
				type: String | Number,
				default: ''
			},
			width: {
				type: String | Number,
				default: '686'
			},
			bankNames:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				names: "",
				bankLists: [],
				kaihuList: [],
				zhihangList: [],
				show: false,
				bankOneId: '',
				bank_name: "",
				branch_name: "",
				page: 1,
				page_size: 100,

			}
		},
		created() {},
		watch: {
			show: {
				immediate: true,
				handler(newValue) {
					console.log('show', newValue);
					this.page = 1
					this.names = ''
					if (this.bankName == '银行列表') {
						this.bankLists = []
						this.getBankList()
					} else {
						this.bankLists = []
					}
				}
			},
			bankNames: {
				immediate: true,
				handler(val) {
					console.log(val,'vallllllllll');
					if(this.placeholder == '银行名称'){
						this.bank_name = val		
					}else{
						this.branch_name = val		
					}
								
				}
			}
			// show(val) {
			// 	if (val) {

			// 	}
			// },
		},
		methods: {
			openBank() {
				this.show = true
			},
			closePopup() {
				this.show = false
				this.$emit('closeBank')
			},
			bankSearch() {
				if (this.names != '') {
					this.page = 1
					this.bankLists = []
					this.getBankList()
				}
			},
			getBankList() {
				let data = {
					code: this.bankPcode,
					name: this.names,
					page: this.page,
					page_size: 1000,
				};
				console.log(data, 'data');
				pageBankList(data).then(res => {
					if (res.code == 1) {
						console.log(res);
						let total = res.data.total
						let cityData = res.data.data;
						this.bankLists = [...this.bankLists, ...cityData]
						if (this.bankLists.length < total) {
							setTimeout(() => {
								this.page++
								this.getBankList()
							}, 0)
						}
					}

				}).catch(err => {
					console.log('getBankList', err);
				})
			},

			// 选取二级银行
			changeAreaTwo(item) {
				if (this.bankName == '银行列表') {
					this.bank_name = item.name
					this.branch_name = ''
				} else {
					this.branch_name = item.branch_name
				}
				const data = {
					...item,
					type: this.bankName == '银行列表' ? 1 : 0
				}
				this.$emit('changeBank', data)
				this.show = false
			},
		}
	}
</script>

<style scoped>
	.bankIuput {
		width: 686rpx;
		/* width: 100%; */
	}

	.area_popup {
		width: 750rpx;
		height: 1200rpx;
		position: relative;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		margin: 0 auto;
	}

	.titles {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 750rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #cccccc;
	}

	.titles>text {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
	}

	.titles_input {
		width: 650rpx;
		/* background: #eeeeee; */
		margin: 20rpx auto;
		padding: 14rpx 0;
	}

	.titles_input>input {
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.service>text {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.masks {
		width: 750rpx;
		height: 220rpx;
		/* background: pink; */
	}

	.popup_list {
		width: 750rpx;
		height: 1200rpx;
		overflow: auto;
		/* padding: 0 30rpx; */
	}

	.area_box {
		width: 100%;
		padding: 14rpx 0;
		font-size: 30rpx;
		color: #333333;
		border-bottom: 1rpx solid rgba(200, 200, 200, 0.1);
		padding-left: 20rpx;
		padding: 20rpx 30rpx;
	}

	.active2 {
		color: #ffffff !important;
		background: #579BFF !important;
	}

	.noImg {
		width: 290rpx;
		height: 240rpx;
	}

	.mt48 {
		margin: 52rpx 0 16rpx;
	}

	/deep/.u-input {
		padding: 0 18rpx 12rpx !important;
	}

	/deep/.u-input__content {
		margin-left: -20rpx;
	}
</style>